<template>
  <div class="patListMainBk">
    <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam" @hideCurr="hideCurrTran()"></navTop>
    <transition name="fade" mode="in-out">
      <section class="scroll_container" v-show="showPatList">
        <section class="list_container">
          <ul class="deliverable_address">
            <li v-for="(item,index) in list" :key="index+1" @click="changePat(item.PATIENT_ID, item)">
              <span class="choose_icon"><i class="iconfont icon-dui" :class="{ choosed: item.DEFAULTBZ=='y' }"></i></span>
              <span>
                <p class="choose_content">
                  <span>{{item.PATIENT_NAME}}&nbsp;{{item.PATIENT_SEX}}&nbsp;{{item.PATIENT_AGE}}</span>
                </p>
                <p class="choose_place">
                  <span>病历号码：{{item.PATIENT_BLHM}}</span>
                </p>
              </span>
              <span class="delete_adr">
                <input type="button" value="删除" class="remove_button" @click="removePat(item.PATIENT_ID)">
              </span>
            </li>
          </ul>
        </section>
        <!-- <p class="add_address" @click="setShowAddPat(true)">新增病人</p> -->
        <nuxt-link class="add_address" :to="{name:'wode-addPatient'}" tag="p">新增病人</nuxt-link>
      </section>
    </transition>
    <transition name="fade" mode="out-in">
      <addPat v-show="showAddPat" @chgPatAdd="setShowAddPat($event)"></addPat>
    </transition>

    <transition name="tipMove">
      <alert-tip :alertText="alertText" v-if="showAlert" @closeTip="closeTip"></alert-tip>
    </transition>
    <transition name="fade" mode="out-in">
      <nuxt-child></nuxt-child>
    </transition>
  </div>
</template>
<script>
import navTop from '~/components/common/navTop';
import alertTip from '~/components/common/alertTip';
import addPat from '~/pages/wode/addPatient';

export default {
  data() {
    return {
      showAddPat: false, // 是否显示添加病人
      showPatList: true,
      bkParam: 'bk', // 返回按扭的类型
      props: ['chgPatSh'],
      headTitle: '选择就诊人',
      showBack: true,
      ts: this.newStore(),
      list: [{ // 病人列表
        COUNTNUM: '', // 记录的数量
        PATIENT_ID: '',
        PATIENT_AGE: '',
        PATIENT_NAME: '',
        PATIENT_PIC_URL: '',
        PATIENT_SEX: '',
        PATIENT_MOBILE: '',
        PATIENT_OPENID: '',
        PATIENT_BLHM: '', // 病历号码
        CRE_TIME: '', // 添加该患者的时间
        ISDELETE: '', // 是否逻辑删除
        DEFAULTBZ: '', // 是否默认病人 y-n
      }],
      iscur: 0,
      alertText: '',
      showAlert: false,
    };
  },
  created() {
    this.$root.showfooter = false;
    this.getPatientList();
  },
  destroyed() {
    this.$root.showfooter = true;
  },
  components: {
    navTop,
    alertTip,
    addPat,
  },
  methods: {
    // 设置显示病人
    setShowAddPat(msg) {
      console.log(`设置添加病人msg的值：${msg}`);
      this.showAddPat = msg;
      // this.showPatList = false;
    },
    hideCurrTran() {
      console.log('patlist组件被调用，发起emit,chgPatShRes');
      this.$emit('chgPatShRes', false);
    },
    closeTip() {
      this.showAlert = false;
    },
    // 删除病人
    removePat(id) {
      const res = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.06.02',
          CLIENTID: 'YLAPP',
          RYBID: '',
          TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
          DATA: { patient_id: id },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': res,
      }).then((ts) => {
        // this.list.splice(0, 1);
        console.log(`删除病人：${ts.d.RESULTTEXT}`);
        this.getPatientList();
      });
    },
    // 获得病人列表
    getPatientList() {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.06.05',
          CLIENTID: 'YLAPP',
          RYBID: '',
          TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
          DATA: {
            rowsperpage: '20',
            page: '1',
            ordercolumn: 'cre_time',
            ordertype: 'desc',
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        console.log(`获取病人列表${JSON.stringify(ts.d.DATAOBJ.DATA)}`);
        this.list = ts.d.DATAOBJ.DATA;
      });
    },
    // 修改默认病人
    changePat(id, patInfo) {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.06.06',
          CLIENTID: 'YLAPP',
          RYBID: '',
          TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
          DATA: { patient_id: id },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        console.log(JSON.stringify(ts.d.RESULTTEXT));
        console.log(`修改默认病人：${ts.d.RESULT}`);
        this.getPatientList();
        // this.$router.back(-1);
        this.$emit('reSetPat', patInfo);
      });
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.scroll_container {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 3rem;
}
.scroll_container p {
  margin-bottom: 0.4rem;
}
.list_container {
  border: 1px solid #f1f1f1;
  font-size: 1rem
}
.deliverable_address {
  background: #fff;
  margin-bottom: 0;
  overflow: auto;
}

.deliverable_address li {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #f1f1f1;
  justify-content: space-between;
}
.deliverable_address span:nth-child(2) {
  flex-grow: 5;
}
.choose_icon {
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  margin-right: 0.4rem;
}
.choose_icon i {
  font-size: 1.2rem;
  display: block;
}
.icon-selected1 {
  color: #aaa;
}
.choosed {
  color: #daca42;
}
.choose_content span:first-child {
  font-weight: 600;
  font-family: "Microsoft Yahei";
}
.choose_content span:last-child {
  margin-left: 1rem;
  font-size: 0.9rem;
}
.choose_place span:first-child {
  background: #4cd964;
  padding: 0.2rem 0.6rem;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 0.2rem;
  margin-right: 0.4rem;
}
.choose_place span:last-child {
  font-size: 0.9rem;
  color: #666;
}
.out_delivery {
  background: #f1f1f1;
  font-family: "Microsoft Yahei";
  padding: 0.4rem;
  color: #666;
  font-size: 0.9rem;
}
.out_delivery_container span {
  color: #ccc;
}
.add_address {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 204;
  background: #3190e8;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  margin-bottom: 0.2rem
}
.remove_button {
  padding: 0.2rem 1rem;
  background-color: #428bca;
  border-color: #357ebd;
  color: #fff;
  border-radius: 0.2rem;
  border: 1px solid transparent;
  font-size: 0.8rem;
  z-index: 5;
}
.patListMainBk {
  background-color: #fff;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .8s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

